<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>信息-列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>

        <el-row :gutter="30">

        <el-col :span="3">
          <el-button type="primary" @click="handleToNewMessage()" icon="el-icon-search"
            >发布新消息</el-button
          >
        </el-col>

          <el-col :span="8">
            <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="筛选开始时间"
      end-placeholder="筛选结束时间">
    </el-date-picker>
        </el-col>
  
            <el-col :span="4">
          <el-input
            placeholder="输入标题或内容关键词"
            v-model="content"
            clearable
            @clear=""
            @click=""
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

 <el-table :data="messageList" border stripe>

        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
           <el-table-column label="发布时间" prop="createtime">
          <template slot-scope="scope">
            {{ scope.row.createtime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="接收用户" prop="acceptuser"></el-table-column>
        <el-table-column label="内容" prop="content"></el-table-column>
        


        
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    
  </div>
</template>

<script>
export default {
  data () {
    let self = this;
    return {
      // 查询条件
      queryInfo: {
        id: '',
        currentPage: 1,
        title: '',
        starttime: null,
        endtime: null,
        
      },
      // 时间起始
      timeRange:['',''],
      // 标签列表
      messageList: [],
      total: 0,
      content:"",


      showDialogVisible: false,
      newDialogVisible: false,




    }
  },
  created () {
    // 加载页面时 加载一次数据
    this.getMessageList(1)
  },
  methods: {
    async getMessageList (page) {
      const { data: res } = await this.$http.get('push/getlist/' + page)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.messageList = res.data.records
      this.total = res.data.total
      console.log(res.data.records)
    },

    // 表格 分页页数切换
    handleCurrentChange (newPage) {
      this.queryInfo.currentPage = newPage
      this.getMessageList(newPage)
    },
        handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getissueList(1)
    },

        // 新增界面
    handleToNewMessage () {
        const vm = this;
        vm.$router.push({path: '/newmessages'})
    },

    cleartime(){
      this.timeRange=['','']
    },

    // 删除用户
    async deleteLabel (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该标签, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((error) => error)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete('label/delete/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.$message.success('删除标签成功')
      // 重新加载一次
      this.getLabelList(this.queryInfo.currentPage)
    },


    async search () {
      let startdate = this.timeRange[0]
      let enddate = this.timeRange[1]
      const { data: res } = await this.$http.post(
        'push/search',
        { 'endtime': enddate,
          'starttime': startdate,
          'content':this.content }, {
          headers: {
            'content-type': 'application/json',
            'X-Request-With': 'XMLHttpRequest',
            'token': window.sessionStorage.getItem('token')
          }
        }
      )
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.messageList = []
      this.messageList = res.data
      this.total = this.messageList.length

      console.log(startdate)

    },

   
    async getlabel(id){
      var { data: res } = await this.$http.get('label/getlabel/' + id)
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      this.showDialogVisible = true
      this.nowlabel = res.data

      if(this.nowlabel.pass == "无法通行"){this.chooseEmer(0)}
      else if (this.nowlabel.pass == "影响通行"){this.chooseEmer(1)}

    },

  },

  
  filters: {

  }
}
</script>

<style lang="less" scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

.el-col {
    border-radius: 4px;
  }


  
.yes{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    
    color:blue
    }
.no{
    float:left
		width:4.2rem 
		height:2rem 
		line-height:2rem 
		text-align:center
		border-radius:1rem 
		&:nth-child(1){
			margin-right:0.8rem 
    }
    color:black

}

</style>
